<!-- app/templates/view_events.html -->
{% extends 'base.html' %}

{% block title %}查看 Webhook 事件 - DCO Webhook{% endblock %}

{% block content %}
    <h1 class="text-2xl font-semibold mb-6">查看 Webhook 事件</h1>
    <form method="get" action="{{ url_for('view_events') }}" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        <input type="text" name="repository" placeholder="仓库名称" value="{{ filters.repository }}" class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
        <input type="text" name="owner" placeholder="所有者" value="{{ filters.owner }}" class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
        <input type="text" name="pusher" placeholder="Pusher" value="{{ filters.pusher }}" class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
        <input type="date" name="date_from" placeholder="开始日期" value="{{ filters.date_from }}" class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
        <input type="date" name="date_to" placeholder="结束日期" value="{{ filters.date_to }}" class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
        <select name="invalid_commits" class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
            <option value="">所有提交</option>
            <option value="yes" {% if filters.invalid_commits == 'yes' %}selected{% endif %}>有无效提交</option>
            <option value="no" {% if filters.invalid_commits == 'no' %}selected{% endif %}>无无效提交</option>
        </select>
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">筛选</button>
    </form>

    {% if events %}
        <div class="overflow-x-auto">
            <table class="min-w-full bg-white">
                <thead>
                    <tr>
                        <th class="py-2 px-4 border-b">ID</th>
                        <th class="py-2 px-4 border-b">仓库</th>
                        <th class="py-2 px-4 border-b">所有者</th>
                        <th class="py-2 px-4 border-b">Pusher</th>
                        <th class="py-2 px-4 border-b">Ref</th>
                        <th class="py-2 px-4 border-b">Before SHA</th>
                        <th class="py-2 px-4 border-b">After SHA</th>
                        <th class="py-2 px-4 border-b">接收时间</th>
                        <th class="py-2 px-4 border-b">无效提交数</th>
                        <th class="py-2 px-4 border-b">详情</th>
                    </tr>
                </thead>
                <tbody>
                    {% for event in events %}
                        <tr class="text-center">
                            <td class="py-2 px-4 border-b">{{ event.id }}</td>
                            <td class="py-2 px-4 border-b">{{ event.repository_name }}</td>
                            <td class="py-2 px-4 border-b">{{ event.repository_owner }}</td>
                            <td class="py-2 px-4 border-b">{{ event.pusher }}</td>
                            <td class="py-2 px-4 border-b">{{ event.ref }}</td>
                            <td class="py-2 px-4 border-b"><code>{{ event.before_sha[:7] }}</code></td>
                            <td class="py-2 px-4 border-b"><code>{{ event.after_sha[:7] }}</code></td>
                            <td class="py-2 px-4 border-b">{{ event.received_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                            <td class="py-2 px-4 border-b">
                                {% if event.invalid_commits %}
                                    <span class="bg-red-500 text-white px-2 py-1 rounded-full">{{ event.invalid_commits|length }}</span>
                                {% else %}
                                    <span class="bg-green-500 text-white px-2 py-1 rounded-full">0</span>
                                {% endif %}
                            </td>
                            <td class="py-2 px-4 border-b">
                                {% if event.invalid_commits %}
                                    <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-3 rounded" onclick="showDetails({{ event.id }})">查看</button>
                                {% else %}
                                    <span class="text-gray-500">无</span>
                                {% endif %}
                            </td>
                        </tr>

                        <!-- 模态框 -->
                        {% if event.invalid_commits %}
                            <div id="modal-{{ event.id }}" class="fixed inset-0 bg-black bg-opacity-50 hidden justify-center items-center">
                                <div class="bg-white rounded-lg shadow-lg w-11/12 md:w-2/3 lg:w-1/2">
                                    <div class="flex justify-between items-center p-4 border-b">
                                        <h2 class="text-xl font-semibold">事件详情 - ID {{ event.id }}</h2>
                                        <button onclick="closeDetails({{ event.id }})" class="text-gray-700">&times;</button>
                                    </div>
                                    <div class="p-4">
                                        <p><strong>仓库:</strong> {{ event.repository_owner }}/{{ event.repository_name }}</p>
                                        <p><strong>Pusher:</strong> {{ event.pusher }}</p>
                                        <p><strong>Ref:</strong> {{ event.ref }}</p>
                                        <p><strong>Before SHA:</strong> <code>{{ event.before_sha }}</code></p>
                                        <p><strong>After SHA:</strong> <code>{{ event.after_sha }}</code></p>
                                        <p><strong>接收时间:</strong> {{ event.received_at.strftime('%Y-%m-%d %H:%M:%S') }}</p>
                                        <hr class="my-4">
                                        <h3 class="text-lg font-semibold mb-2">无效提交:</h3>
                                        {% if event.invalid_commits %}
                                            <ul class="list-disc list-inside">
                                                {% for commit in event.invalid_commits %}
                                                    <li class="mb-2">
                                                        <p><strong>SHA:</strong> <code>{{ commit.sha }}</code></p>
                                                        <p><strong>作者:</strong> {{ commit.author }}</p>
                                                        <p><strong>消息:</strong> {{ commit.message }}</p>
                                                        <p><strong>链接:</strong> <a href="{{ commit.url }}" target="_blank" class="text-blue-500">{{ commit.url }}</a></p>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        {% else %}
                                            <p>所有提交均通过 DCO 验证。</p>
                                        {% endif %}
                                    </div>
                                    <div class="flex justify-end p-4 border-t">
                                        <button onclick="closeDetails({{ event.id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">关闭</button>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative" role="alert">
            <span class="block sm:inline">没有找到相关事件。</span>
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
<script>
    function showDetails(eventId) {
        document.getElementById(`modal-${eventId}`).classList.remove('hidden');
        document.getElementById(`modal-${eventId}`).classList.add('flex');
    }

    function closeDetails(eventId) {
        document.getElementById(`modal-${eventId}`).classList.add('hidden');
        document.getElementById(`modal-${eventId}`).classList.remove('flex');
    }
</script>
{% endblock %}
